import {useState} from 'react'
import { useHistory } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { Input,Button,Tabs,List } from 'antd-mobile/2x'
import Mock from 'mockjs'


let abc= Mock.mock('@csentence(15,20)')
let f= Mock.mock('@csentence(7)')
let d= Mock.mock('@image(345x200)')
let t= Mock.mock('@string("number", 1,2)')
let g= Mock.mock('@string("number", 1,3)')



const Shipin=()=>{
    const [key,setKey]=useState(1)
     return(
         
         <>
         
         <div className='main'>
             <Tabs onChange={key=>setKey(key)}>
                 <Tabs.Tab title='推荐' key='1' />
                 <Tabs.Tab title='小视频' key='2' />
             </Tabs>
         </div>
         <div className='hct'>
         {key=='1'&&(
                       <List>
             <div className=''>
                <div className=''>
                    <div className='a'>
                    {abc}
                    </div>
                    <div className='b'>
                        {f}
                    </div>
                    <div className='c'>{t}小时前</div>
                    {/* <div className='i'>{g}评</div> */}
                </div>
                <div className='tu2'>
                    <img src={d} />
                </div>
                <br />
            </div>
        {/* --------------------------- */}
        <div className=''>
                <div className=''>
                    <div className='a'>
                    {abc}
                    </div>
                    <div className='b'>
                        {f}
                    </div>
                    <div className='c'>{t}小时前</div>
                    {/* <div className='i'>{g}评</div> */}
                </div>
                <div className='tu2'>
                    <img src={d} />
                </div>
                <br />
            </div>
        {/* --------------------------- */}
        <div className=''>
                <div className=''>
                    <div className='a'>
                    {abc}
                    </div>
                    <div className='b'>
                        {f}
                    </div>
                    <div className='c'>{t}小时前</div>
                    {/* <div className='i'>{g}评</div> */}
                </div>
                <div className='tu2'>
                    <img src={d} />
                </div>
                <br />
            </div>
        {/* --------------------------- */}
        </List> 
         )}
          {key=='2'&&(
            <List>
                <div className=''>
                <div className=''>
                    <div className='a'>
                    {abc}
                    </div>
                    <div className='b'>
                        {f}
                    </div>
                    <div className='c'>{t}小时前</div>
                    {/* <div className='i'>{g}评</div> */}
                </div>
                <div className='tu2'>
                    <img src={d} />
                </div>
                <br />
            </div>
        {/* --------------------------- */}
        <div className=''>
                <div className=''>
                    <div className='a'>
                    {abc}
                    </div>
                    <div className='b'>
                        {f}
                    </div>
                    <div className='c'>{t}小时前</div>
                    {/* <div className='i'>{g}评</div> */}
                </div>
                <div className='tu2'>
                    <img src={d} />
                </div>
                <br />
            </div>
        {/* --------------------------- */}
            </List>
          )}
         </div>
         </>
     )
}
export default Shipin;
// export default()=>{
//     return <div>我是视频</div>
// }